<template>
	<view class="pop">
		<!-- 登录 -->
		<u-popup :show="computedpop" :round="10" mode="center" @close="loginClose" @open="loginOpen">
			<view class="popstyle">
				<view class="header-close">
					<view></view>
					<image src="../static/index/login-close.png" mode="" @click="closeLoginPop"></image>
				</view>
				<view class="title">你还未登录</view>
				<image src="../static/index/login-user.png" mode="" class="login-user"></image>
				<view class="tips">请先登录后进行操作</view>
				<view class="button" @click="login">
					立即登录
				</view>
				<view class="no-login" @click="closeLoginPop">暂不登录</view>
			</view>
		</u-popup>
		<!-- 电话授权 -->
		<u-popup :show="phoneShow" :round="10" mode="center" @close="phoneClose" @open="phoneOpen">
			<view class="popstyle">
				<view class="header-close">
					<view></view>
					<image src="../static/index/login-close.png" mode="" @click="closePhonePop"></image>
				</view>
				<view class="title">授权手机号</view>
				<image src="../static/index/login-phone.png" mode="" class="login-user"></image>
				<view class="tips">您暂未授权手机号，请授权</view>
				<!-- 			<view class="button" @click="phone">
					立即授权
				</view> -->
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phone-button">立即授权</button>
				<view class="no-login" @click="closePhonePop">暂不授权</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneShow: false,
				openid: '',
				session_key: "",
				userinfo: {}
			}
		},
		computed: {
			computedpop() {
				return this.$store.state.pop;
			}
		},
		methods: {
			loginOpen() {
				// console.log('open');
			},
			loginClose() {
				this.$store.commit('closePop')
				// console.log('close');
			},
			//登录关闭弹窗
			closeLoginPop() {
				this.$store.commit('closePop')
			},
			phoneOpen() {

			},
			phoneClose() {
				this.phoneShow = false
			},
			//关闭授权弹窗
			closePhonePop() {
				this.phoneShow = false
				uni.$u.toast('请先授权手机号码')
			},
			//登录
			login() {
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				let wxCode = '';
				uni.login({
					success({
						code
					}) {
						wxCode = code;
					}
				});
				console.log(wxCode,'code')
				uni.getUserProfile({
					desc: '获取微信头像昵称信息',
					success: async e => {
						console.log('getUserProfile',e)
						this.$H.post(this.$api.login, {
							code: wxCode,
							iv: e.iv,
							encryptedData: e.encryptedData
						}, {
							token: false
						}).then(res => {
							console.log(res,'登录信息')
							this.openid = res.data.openid
							this.session_key = res.data.session_key
							this.userinfo = {
								nickName: res.data.userinfo.nickName,
								gender: res.data.userinfo.gender,
								avatarUrl: res.data.userinfo.avatarUrl,
							}
							if (res.code === 1) {
								this.$store.commit('isLogin')
								uni.setStorageSync('userInfo', res.data.userinfo)
								uni.hideLoading();
								this.$store.commit('closePop')
								if(res.data.userinfo.nickname == '微信用户'){
									uni.navigateTo({
										url:'/pages/meInfo/meInfo'
									})
								}
							} else if (res.code == 2) {
								uni.hideLoading();
								this.$store.commit('closePop')
								this.phoneShow = true
							}
						})
					},
					fail: () => {
						uni.hideLoading();
						this.$store.commit('closePop')
					}
				})
			},
			//手机号码授权
			async getPhoneNumber(e) {
				uni.showLoading({
					title: '授权中',
					mask: true
				});
				this.phoneShow = false
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log(e)
					this.$H.post(this.$api.mobile_auth, {
						openid: this.openid,
						session_key: this.session_key,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						userinfo: this.userinfo
					}, {
						token: false
					}).then(res => {
						uni.hideLoading();
						this.$store.commit('isLogin')
						this.$store.commit('closePop')
						uni.setStorageSync('userInfo', res.data.userinfo)
						if(res.data.userinfo.nickname == '微信用户'){
							uni.navigateTo({
								url:'/pages/meInfo/meInfo'
							})
						}
					})
				} else {
					uni.$u.toast('请重新授权手机号码')
				}
			}

		}
	}
</script>

<style lang="scss">
	.pop {
		.popstyle {
			text-align: center;
			width: 516rpx;

			.header-close {
				width: 100%;
				display: flex;

				view {
					flex: 1;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-top: 34rpx;
					margin-right: 34rpx;
				}
			}

			.title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				line-height: 32rpx;
				color: #212121;
				opacity: 1;
			}

			.login-user {
				width: 270rpx;
				height: 180rpx;
				margin-top: 20rpx;
			}

			.tips {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 28rpx;
				color: #212121;
				opacity: 1;
			}

			.button {
				margin: 60rpx 70rpx 0 70rpx;
				padding: 24rpx 0rpx;
				background: linear-gradient(270deg, #20B0C1 0%, #67E7F5 100%);
				opacity: 1;
				border-radius: 34px;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 32rpx;
				color: #FFFFFF;
				opacity: 1;
			}

			.no-login {
				margin: 22rpx 0 46rpx 0;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 28rpx;
				color: #A1A1A1;
				opacity: 1;
			}

			.phone-button {
				margin: 60rpx 60rpx 0 60rpx;
				padding: 24rpx 0;
				background: linear-gradient(270deg, #20B0C1 0%, #67E7F5 100%);
				opacity: 1;
				border-radius: 68rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 32rpx;
				color: #FFFFFF;
				opacity: 1;
			}
		}
	}
</style>
